<template>
    <div class="hospital">

        <!-- 左侧导航区域 -->
        <div class="menu">
                    <div class="top">
            <el-icon><House /></el-icon>
            <span>/ 医院信息</span>
        </div>
        <!--  :router="true "
              @click="changeActive('/hospital/register')"
        -->
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true" >
                <el-menu-item index="/hospital/register" :route="{path:'/hospital/register',query:{hoscode:$route.query.hoscode}}" >
                    <el-icon><Calendar /></el-icon>
                    <span>预约挂号</span>
                </el-menu-item>
                <el-menu-item index="/hospital/detail" :route="{path:'/hospital/detail',query:{hoscode:$route.query.hoscode}}">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>医院详情</span>
                </el-menu-item>
                <el-menu-item index="/hospital/notice" :route="{path:'/hospital/notice',query:{hoscode:$route.query.hoscode}}">
                    <el-icon>
                        <Bell />
                    </el-icon>
                    <span>预约须知</span>
                </el-menu-item>
                <el-menu-item index="/hospital/close" :route="{path:'/hospital/close',query:{hoscode:$route.query.hoscode}}">
                    <el-icon>
                        <Warning />
                    </el-icon>
                    <span>停诊信息</span>
                </el-menu-item>
                <el-menu-item index="/hospital/query" :route="{path:'/hospital/query',query:{hoscode:$route.query.hoscode}}">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>查询/取消</span>
                </el-menu-item>
            </el-menu>
        </div>
        <!-- 右侧内容展示区域：路由组件展示位置 -->
        <div class="content">
            <!-- 子组件展示区域 -->
            <!-- 添加路由标签 -->
            <router-view></router-view>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import useDetailStore from '../../store/modules/hospitalDetail';
// 获取仓库对象
let detailStore = useDetailStore();
import {
    Document,
    Menu as 
    Bell,
    Search,
    Warning ,
    Calendar,
    House
} from '@element-plus/icons-vue'

import { useRoute } from "vue-router";
// 获取当前路由的信息
let $route = useRoute();
// 组件挂载完毕：通知pinia仓库发送请求获取医院详情数据，存储在仓库当中
onMounted(()=>{
    // 获取医院详情的数据
    detailStore.getHospital($route.query.hoscode as string);
    // 获取某一个医院科室的数据
    detailStore.getDeparment($route.query.hoscode as string);
})
</script>

<style lang="scss">
.hospital {
    display: flex;

    .menu {
        flex: 3; 
       display: flex;
       flex-direction: column;
       align-items: center; 
       .top{
        color: #a7abb7;
       }
    }

    .content {
        flex: 17
    }
}
</style>